<!--
 * @Description: 3_虚拟DOM与真实DOM
 * @notes: 
 * @Author: 台火山
 * @Date: 2024-04-21 16:49:48
 * @LastEditors: 台火山
 * @LastEditTime: 2024-04-21 17:05:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_虚拟DOM与真实DOM</title>
</head>

<body>
    <!-- 准备号一个“容器” -->
    <div id="test"></div>
    <div id="demo"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom,用于支持react操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 babel，用于将 jsx 转化为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写 babel */
        // 1.创建虚拟DOM
        const VDOM = (
            <h1>
                <span>Hello,React</span>
            </h1>
        );// 此处一定不要写引号,因为不是字符串
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
        console.log('虚拟DOM', VDOM);
        console.log('虚拟DOM typeof', typeof VDOM);
        console.log('虚拟DOM 是不是 object的实例', VDOM instanceof Object);
        // 真实DOM
        const TDOM = document.getElementById('demo');
        console.log('真实DOM', TDOM);
        // debugger;
        /*
            关于虚拟 DOM
            1.本质是 Object 类型的对象(一般对象)
            2.虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内部在用,无需真实DOM上那么多属性.
            3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上.
        */
    </script>
</body>

</html>